<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>确认订单</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab1 .aui-active{
          color: #ff6565;
          border-bottom: 2px solid #ff6565;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #ff6565;
          border: solid 1px #ff6565;
        }
        .aui-toast{
          width: 9.5rem;
          background: #999;
          opacity: 0.7;
          height: 4rem;
          min-height: 4rem;
          line-height: 4rem;
        }
        .aui-toast-content{
          color: #fff;
        }
        .aui_list{
            background-image: linear-gradient(0,#eee,#eee 50%,transparent 50%);
        }
        .aui-list-item{
            background-image:linear-gradient(0,#eee,#eee 50%,transparent 50%) !important;
        }
        .aui-refresh-content {
          min-height: 100vh;
          padding-bottom: 2.5rem;
        }

        .exchangeList_img{
          background:url(../../image/cpimg.jpg) center center/cover no-repeat;
          background-size:100% 100%;
        }
        .exchangeList_right{
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          padding: 0.5rem 0.5rem 0;
        }
        .aui-list.ex .aui-list-item-media{
          width:5rem;
          height:4rem;
          padding-right:1rem;
        }
        .aui-list.ex .aui-list-item-media{
          padding-top:0;
          padding-bottom: 0;
        }
        .exchangeList_right_txt{
          position: relative;
          width:100%;
        }
        .exchangeList_right_bottom{
          position: absolute;
          width: 100%;
          bottom:0;
          left:0;
          line-height: 0.6rem;
        }
        .exchangeList_right_bottom1{
          float:left;
          font-size:0.7rem;
          color:#ff7a7a;
        }
        .exchangeList_right_bottom2{
          float:right;
        }
        .aui-list.ex .aui-list-item-title{
          font-size:0.7rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

      </style>
  </head>
  <body>
<div id="app" v-cloak style="box-sizing:border-box">
  <div class="aui-refresh-content">
        <ul class="aui-list aui-media-list"  style="border-top:10px solid #F3EFEE;">
          <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;" @click="open_userUrl(infoList.address.a_id)" v-if="infoList.address">
              <div class="aui-media-list-item-inner" style="padding-left:1.5rem;">
                <div class="aui-list-item-media" style="width: 9.5rem;">收货人：{{infoList.address.consignee}}</div>
                <div class=" makeSure_get_text" style="">{{infoList.address.telephone}}</div>
              </div>
              <div class="aui-media-list-item-inner" style="margin-top: -0.7rem;">
                  <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                      <img src="../../image/my/m39.png" style="width:0.8rem;">
                  </div>
                  <div class="aui-list-item-inner aui-list-item-arrow">
                      <div class="aui-list-item-text">
                          <div class="aui-list-item-title aui-font-size-12">收货地址：{{infoList.address.province}}{{infoList.address.city}}{{infoList.address.district}}{{infoList.address.place}}</div>
                      </div>
                  </div>
              </div>
              <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
          </li>

          <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;" @click="open_userUrl()" v-else>
              <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                      <img src="../../image/my/m39.png" style="width:0.8rem;">
                  </div>
                  <div class="aui-list-item-inner aui-list-item-arrow">
                      <div class="aui-list-item-text">
                          <div class="aui-list-item-title aui-font-size-12">点击添加收货地址</div>
                      </div>
                  </div>
              </div>
              <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
          </li>

          <li><div class="user_nav_line"></div></li>
        </ul>
        <ul class="aui-list aui-media-list" style="margin-top:10px;">
           <!-- <li class="aui-list-item-middle aui-list-item" v-if="items.store">
               <div class="aui-media-list-item-inner">
                   <div class="aui-list-item-media" style="width:1.4rem;padding-right:5px">
                       <img :src="items.logo_pic" class="aui-list-img-sm order_sm_img">
                   </div>
                   <div class="aui-list-item-inner">
                       <div class="aui-list-item-text">
                           <div class="aui-list-item-title aui-font-size-14">{{items.goods_name}}</div>
                       </div>

                   </div>
               </div>
           </li> -->
           <li   v-for="(items, index) in infoGoods" :key="index" class=" aui-list-item-middle aui-list-item apply_main_li">
           <div class="aui-media-list-item-inner">
               <div class="aui-list-item-media" style="width: 5rem;">
                   <img :src=items[index].logo_pic class="aui-list-img-md">
               </div>
               <div class="aui-list-item-inner">
                   <div class="aui-list-item-text">
                     <div  class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                       <div class="aui-font-size-12">{{items[index].goods_name}}</div>
                       <!-- <div class="aui-list-item-text aui-font-size-12">黑色:XL码</div> -->
                       <div class="aui-list-item-text aui-font-size-18 make_money_tag" style="margin-top:0.5rem">
                         <div class="make_nav_content_div" v-if="items[index].area_type==1">
                           <span class="make_money_tag_text">￥</span>
                           <span style="color:#ff6565;">{{items[index].price}}</span>
                         </div>

                         <div class="make_nav_content_div" v-else-if="items[index].area_type==0">
                           <span style="color:#ff6565;">{{items[index].price}}</span>
                             <span class="make_money_tag_text">兑换币</span>
                         </div>

                         <!-- <div  class="aui-list-item-right" style="font-size:0.7rem">×{{items.num}}</div> -->
                       </div>
                    </div>
                   </div>
               </div>
           </div>
        </li>
        <li class="aui-list-item aui-list-item-middle">
                       <div class="aui-media-list-item-inner">

                           <div class="aui-list-item-inner aui-list-item-arrow">
                               <div class="aui-list-item-text">
                                   <div class="aui-list-item-title aui-font-size-14">配送方式</div>
                                     <div class="aui-list-item-right aui-font-size-14" style="color:#000" @click="sendType(infoList.express_fee)">
                                     <span v-if="is_selflift == 0">快递 <i style="font-style: normal" v-if="infoList.express_fee == 0">免邮</i><i style="font-style: normal" v-else>￥{{infoList.express_fee}}</i></span>
                                     <span v-else-if="is_selflift == 1">自提</span>

                                   </div>
                               </div>
                           </div>
                       </div>
                </li>
        <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner" style="padding:0;">
                        <div class="aui-list-item-media" style="width:8rem;">
                          <div class="aui-list-item-title aui-font-size-14">买家留言 ({{textNum}}/200)</div>
                        </div>
                    </div>
                    <textarea maxLength="200" placeholder="请填写您对卖家的特别要求"
                    style="font-size:0.6rem;padding-right: 0.7rem;margin-top:-0.5rem;height:4rem;line-height:0.8rem"
                     v-model="customerMessage"></textarea>
                </li>
            <li class="aui-list-item aui-list-item-middle" style="line-height:2.2rem;padding-right:0.75rem">
                <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
                  <div class="aui-list-item-right" style="margin-right:8px;font-size: 0.7rem;">共{{infoList.num}}件商品</div>
                  <div class="aui-list-item-right" style="font-size: 0.7rem;">总计:</div>
                  <div class="aui-list-item-right" style="color:#ff6565;font-size: 0.7rem;">￥{{infoList.subtotal}}</div>
                  <!-- <div class="aui-list-item-right" style="color:#ff6565;font-size: 0.7rem;" v-else-if="item.area_type==0">{{items.store.subtotal}}兑换币</div> -->
                </div>

            </li>

      </ul>
      </div>
      <div class="makeSure_footer_pay_all">
        <div class="makeSure_footer_pay_all_text">总计：</div>
        <div class="makeSure_footer_pay_all_money">￥{{infoList.total}}</div>
        <div class="makeSure_footer_pay_all_btn" @click="open_sendOrder()">提交订单</div>
      </div>

</div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">
  var header_top = $api.byId('header_top');
  var header_topPos = $api.offset(header_top)
      apiready = function(){

        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
              addressId: '',
              infoList: [],
              is_selflift: 0,
              customerMessage:'',
              textNum:0,
              infoGoods:{}
            },
            created: function() {
                var $this = this;
                $this.getOrder()
                api.addEventListener({
                    name: 'changeAddress'
                }, function(ret, err) {
                  //  console.log(JSON.stringify(ret))
                  if (!ret.value.value) {
                    $this.infoList.address = null
                  } else {

                    if (!$this.infoList.address) {
                        var back = $this.infoList
                        $this.infoList = {}
                        $this.infoList = Object.assign({
                          address: ret.value.value
                        }, back)
                    } else {
                        $this.infoList.address = ret.value.value
                    }
                    $this.addressId = ret.value.value.a_id
                    $this.getOrder()
                  }

                });
                api.addEventListener({
                    name: 'sendType'
                }, function(ret, err) {
                  $this.is_selflift = ret.value.type

                });
            },
            mounted: function() {
                var $this = this;
                api.hideProgress();
                // var pullRefresh = new auiPullToRefresh({
                //     container: document.querySelector('.aui-refresh-content'),
                //     triggerDistance: 100
                // }, function(ret) {
                //     if (ret.status == "success") {
                //       $this.getOrder(function () {
                //         setTimeout(function () {
                //           pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                //         }, 500)
                //       })
                //     }
                // })
            },
            methods: {

              open_userUrl: function (id){
                var id = id || null
                api.openWin({
                    name: 'user_url',
                    url: './user_url.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: api.frameHeight
                    },
                    pageParam: {
                        id: id
                    }
                });


              },
              getOrder: function (fn) {
                var $this = this;
                // console.log(JSON.stringify(api.pageParam))
                var under_type = api.pageParam.under_type || 1
                var goodsId = api.pageParam.goodsId || null
                var num = api.pageParam.num || null
                var goodsId = api.pageParam.goodsId || null
                var sku_id = api.pageParam.sku_id || null
                var exchange_id = api.pageParam.exchange_id || 0
                var exchange_sku_id = api.pageParam.exchange_sku_id || 0
                var cartId = api.pageParam.cartId || null
                var addressId= $this.addressId || null
                  console.log(JSON.stringify(exchange_id))
                api.ajax({
                    url: window.Url.Freegive_index,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            under_type: under_type, //1-单独购买,2-购物车
                            addressId: addressId, //收货地址id(可不传)
                            goodsId: goodsId, //	商品ID(type为1必传)
                            num: num, //	数量(type为1必传)
                            sku_id: sku_id, //	sku_id((可不传))
                            // give_ids: exchange_id, //	普通买赠商品购买需传，赠品id,买赠商品必传
                            give_ids: exchange_id, //普通买赠商品购买需传，赠品sku_id,可传
                            cartId: cartId, //	type为2必传（-1-2-）
                            is_selflift: 0, //是否自提，1-是，0-否
                            shop_id:api.pageParam.shop_id||$api.getStorage('shop_id')||""
                        }
                    }
                }, function(ret, err) {
                        console.log(JSON.stringify(ret.data))
                    if (ret) {
                        if (ret.re == 1) {
                            $this.infoList = ret.data;
                            $this.dj = ret.data.total;
                             console.log(JSON.stringify(ret.data))
                            $this.addressId = ret.data.address ? ret.data.address.address_id : ''
                            fn && fn()
                        } else {
                          api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                        }
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
              },
              open_sendOrder: function (){
                var $this = this;
                var under_type = api.pageParam.under_type || 1
                var goodsId = api.pageParam.goodsId || null
                var num = api.pageParam.num || null
                var goodsId = api.pageParam.goodsId || null
                var sku_id = api.pageParam.sku_id || null
                var exchange_id = api.pageParam.exchange_id || 0
                var exchange_sku_id = api.pageParam.exchange_sku_id || 0
                var cartId = api.pageParam.cartId || null
                console.log(JSON.stringify(exchange_id))
                if (under_type == 1){
                  api.ajax({
                      url: window.Url.Freegive_makeOrder,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('token'),
                              addressId: $this.addressId, //收货地址id
                              goodsId: goodsId, //	商品ID
                              nums: num, //	数量
                              sku_id: sku_id, //	sku_id
                              give_ids: exchange_id, //	普通买赠商品购买需传，赠品id,买赠商品必传
                              // exchange_sku_id: exchange_sku_id, //普通买赠商品购买需传，赠品sku_id,可传
                              is_selflift: $this.is_selflift, //是否自提，1-是，0-否
                              comment:$this.customerMessage,
                              shop_id:api.pageParam.shop_id||$api.getStorage('shop_id')||""
                          }
                      }
                  }, function(ret, err) {
                      if (ret.re == 3) {
                        var o_ids = [];
                        o_ids.push(ret.data.order_id)
                          // api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                          var jsfun = 'window.location.reload();';
                          api.execScript({
                              name: 'root',
                              frameName: 'carlist',
                              script: jsfun
                          });
                          api.openFrame({
                              name: 'pay_order',
                              url: './pay_order.html',
                              bounces: false,
                              pageParam:{
                                order_id: o_ids,
                                order_no: ret.data.order_no,
                                pay_class: 1,
                                under_type: 1
                              }
                          });
                      } else if(ret.re==3){
                            api.toast({ msg: ret.info,duration: 1000,location:'middle' });
                            setTimeout(function(){api.closeToWin({name:'root'})},1000)
                      }else{
                            api.toast({ msg: ret.info,duration: 1000,location:'middle' });
                      }
                  })

              },
              sendType: function (express_fee) {
                api.openFrame({
                    name: 'sendType',
                    url: './sendType.html',
                    bounces: true,
                    pageParam: {
                      express_fee: express_fee
                    }
                });
              }
            },
            watch:{
              customerMessage:function(val){
                if(val.length==200){
                  api.toast({ msg:'不能超过200字',duration: 1000,location:'middle' });this.textNum=val.length;
                }else{
                  this.textNum=val.length
                }

              }
            }
        })
      };

  </script>
  </html>
